<template>
    <div class="header-wrapper pr border-1px-bottom">
      <div class="left-logo-wrapper fl">
        <div class="logo-wrapper inline pr"></div>
        <div class="connect-tel-wrapper inline pr"></div>
      </div>
      <div class="right-menu-wrapper fr" :class="{roateIconRight:roateIcon,roateIconLeft:roateIconLeft}" @click="addAnimate"></div>
      <transition name="toggle">
        <div class="menu-list-wrapper pa" :class="{'extend-in':roateIcon,'extend-out':roateIconLeft}" v-show="showMenuList">
          <ul>
            <li v-for="item in pageArr" :class="{active:item.path === page}" @click="goPath(item.path)">
              <div class="item pr tc">{{item.name}}<i class="pa"></i></div>
            </li>
            <li @click="goPath('login')" v-if="!logined"><div class="item pr tc">登录<i class="pa"></i></div></li>
            <li @click="exitUser" v-else><div class="item pr tc">退出<i class="pa"></i></div></li>
          </ul>
        </div>
      </transition>
    </div>
</template>

<script>
    import Toast from '@/common/js/toast'

    export default {
        name: "Header",
        props:["page"],
        data() {
            return {
              showMenuList:false,
              roateIcon:false,
              roateIconLeft:false,
              extendY:false,
              pageArr:[
                {"path":"index","name":"首页"},
                {"path":"name","name":"取名改名"},
                {"path":"layout","name":"风水布局"},
                {"path":"fee","name":"收费标准"},
                {"path":"about","name":"关于我们"},
              ],
              logined:false
            }
        },
        methods: {
          addAnimate(){
            this.showMenuList = !this.showMenuList;
            this.roateIcon = !this.roateIcon;
            this.roateIconLeft = !this.roateIcon;
          },
          goPath(path){
            if(path === "index"){
              path = "/";
            }
            this.$router.push({path:path});
          },
          isLogin(){
            if(sessionStorage.getItem("loginFlag") === "yes" && sessionStorage.getItem("userId")){
              this.logined = true;
            }
          },
          exitUser(){
            sessionStorage.removeItem("loginFlag");
            sessionStorage.removeItem("userId");
            this.logined = false;
            Toast("退出成功");
          }
        },
        created(){
          this.isLogin();
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylu/index.styl"

  .header-wrapper
    height 100px
    line-height 100px
    padding 0 30px
    border-1px-bottom(#dcdcdc)
    .left-logo-wrapper
      font-size 0
      .logo-wrapper
        width 159px
        height 46px
        top 27px
        background url("./logo.png") no-repeat center center
        background-size 159px 46px
      .connect-tel-wrapper
        width 173px
        height 48px
        top 26px
        background url("./tel.png") no-repeat center center
        background-size 173px 48px
        margin-left 26px
    .right-menu-wrapper
      width 36px
      height 27px
      margin-top 36.5px
      background url("./menu-icon.png") no-repeat center center
      background-size cover
    .menu-list-wrapper
      z-index 9
      background rgba(243,243,243,0.95)
      width 100%
      height 600px
      overflow hidden
      top 100px
      left 0
      ul
        li
          &.active
            background #ffffff
            /*.item*/
              /*i*/
                /*display none*/
          .item
            width 300px
            margin 0 auto
            height 100px
            line-height 100px
            font-size 32px
            i
              width 100%
              bottom -1px
              left 0
              height 2px
              background url("./line-bg.png") no-repeat center center
              background-size cover
</style>
